<template>
  <div class="section">
    <div class="area-body">
      <h2 class="area-title"><em class="iconfont" @click="cancel_btn">&#xe630;</em></h2>
      <div class="area-box">
        <div class="area-l-box">
          <h3>可选地区</h3>
          <ul class="area-l-ul">
            <li v-show="!item.checked1" v-for="(item,index) in vue_areaLeftData" @click="firstNode_btn(item,index)">
              <p :class="{gray:item.checked}">
                <span @click.stop="reduceIcon_btn(item,index)" v-if="vue_iconShow && vue_index === index" class="reduceIcon"><em class="iconfont">&#xe6a0;</em></span>
                <span @click.stop="addIcon_btn(item,index)" class="addIcon" v-else="!vue_iconShow && vue_index === index"><em class="iconfont">&#xe67f;</em></span>
                <span class="firstTreeName">{{item.treeName}}</span>
              </p>
              <ul class="area-last-ul">
                <li @click.stop="lastNode_btn(item1,index1)" :class="{gray:item1.checked}" v-for="(item1,index1) in item.children" v-show="vue_areaListShow && vue_index === index &&!item1.checked1">
                  <span>{{item1.treeName}}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="area-m-box">
          <span @click="addLeftToRight">添加</span>
        </div>
        <div class="area-r-box">
          <h3>已选地区</h3>
          <ul class="area-l-ul">
            <li v-show="item.checked1" v-for="(item,index) in vue_areaRightData">
              <p>
                <span @click.stop="reduceLeftIcon_btn(item,index)" v-if="vue_iconRShow && vue_indexR === index" class="reduceIcon"><em class="iconfont">&#xe6a0;</em></span>
                <span @click.stop="addLeftIcon_btn(item,index)" class="addIcon" v-else="!vue_iconRShow && vue_indexR === index"><em class="iconfont">&#xe67f;</em></span>
                <span class="firstTreeName">{{item.treeName}}</span>
                <em class="iconfont delete_icon" @click="deleteProvincial_btn(item,index)">&#xec50;</em>
              </p>
              <ul class="area-last-ul">
                <li v-for="(item1,index1) in item.children" v-show="vue_areaListRShow && vue_indexR === index &&item1.checked1">
                  <span>{{item1.treeName}}</span>
                  <em class="iconfont delete_icon" @click="deleteCity_btn(item1,index1)">&#xec50;</em>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="button">
        <el-button type="primary" @click="treeSureData_btn">确定</el-button>
        <el-button @click="cancel_btn">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import * as areaData from '../../assets/data/areaDate';
  export default {
    props:["show_right_select","return_left_data"],         //父组件传入的（右边被选中的值）
    data(){
      return{
        vue_areaLeftData:JSON.parse(JSON.stringify(areaData.areaDataList)),    //左边的区域树
        vue_areaRightData:JSON.parse(JSON.stringify(areaData.areaDataList)),    //右边的区域树
        vue_areaListShow:false,   //市级（展开、折叠）
        vue_iconShow:false,    //左边icon图标（显示、隐藏）
        vue_index:"",    //左边存储index
        vue_indexR:"",   //右边index
        vue_areaListRShow:false,   //右边市级（展开、折叠）
        vue_iconRShow:true,    //右边icon图标（显示、隐藏）
        vue_arr:[],  //（临时存储的中间变量，用在删除时做判断条件）
        vue_dealProvincialRight:{},    //（临时存储的中间变量，用在删除时暂存右边数据）
      }
    },
    watch:{
      'show_right_select':{
        deep:true,
        handler:function(val,oldVal){
          //处理右边tree显示问题
          this.vue_areaRightData = JSON.parse(JSON.stringify(val));
          this.vue_arr =  JSON.parse(JSON.stringify(val));
        }
      },
      'return_left_data':{    //当父组件点击删除一条数据的按钮时（触发该执行）
        deep:true,
        handler:function(val,oldVal){
          val.forEach((itemA,indexA,arrA) =>{
            this.vue_areaLeftData.forEach((itemB,indexB,arrB) =>{
              if(itemA.treeCode == itemB.treeCode){
                if(itemA.checked1){
                  itemB.checked1 = false;
                  itemB.dealWith = true;
                  itemA.children.forEach((itemC,indexC,arrC) =>{
                    itemB.children.forEach((itemD,indexD,arrD) =>{
                      if(itemC.treeCode == itemD.treeCode){
                        if(itemC.checked1){
                          itemD.checked1 = false;
                          itemD.dealWith = true;
                        }
                      }
                    })
                  })
                }
              }
            })
          })
        },
      },

    },
    methods:{

      //点击（取消）按钮
      cancel_btn(){
        this.vue_arr.forEach((itemA,indexA,arrA) =>{
          this.vue_areaLeftData.forEach((itemB,indexB,arrB) =>{
            if(itemA.treeCode == itemB.treeCode){
              if(itemA.checked1){

                if(itemB.checked1){               //左边省级不显示
                  itemB.dealWith = false;
                  itemA.children.forEach((itemC,indexC,arrC) =>{
                    itemB.children.forEach((itemD,indexD,arrD) =>{
                      if(itemC.treeCode == itemD.treeCode){
                        if(itemC.checked1){
                          itemD.checked1 = true;
                          itemD.dealWith = false;
                        }
                      }
                    })
                  });
                }else{            //左边省级显示，判断其下市级
                  itemB.dealWith = true;
                  itemA.children.forEach((itemC,indexC,arrC) =>{
                    itemB.children.forEach((itemD,indexD,arrD) =>{
                      if(itemC.treeCode == itemD.treeCode){
                        if(itemC.checked1){
                          itemD.checked1 = true;
                          itemD.dealWith = false;
                        }else if(itemD.checked1 && itemD.dealWith){
                          itemD.checked1 = false;
                          itemD.dealWith = true;
                        }
                      }
                    })
                  });
                }
                itemB.checked1 =itemB.children.every(itemG =>{
                  return !itemG.dealWith
                });
              }else{
                if(itemB.dealWith){
                  itemB.checked1 = false;
                  itemB.children.forEach((itemE,indexE,arrE) =>{
                    if(itemE.dealWith){
                      itemE.checked1 = false;
                    }
                  })
                }
              }
            }
          })
        });

        this.vue_areaListShow = false;
        this.vue_iconShow = false;
        this.$emit("listenToChildCanle");     //向父组件传值（监听取消按钮）
      },

      //右边点击（市级）（删除）按钮
      deleteCity_btn(item1,index1){
        //处理左边数据
        this.vue_areaLeftData.forEach((itemB,indexB,arrB) =>{
          if(itemB.treeCode == item1.nodePropMap.areaParentCode){  //循环左边省，根据treeCode找到左边与该点击treeCode相等的（省级）
            if(itemB.checked1){    //判断左边该省是否显示，若不显示，置为显示、置为可处理
              itemB.checked1 = false;
              itemB.dealWith = true;
            }
            itemB.children.forEach((itemC,indexC,arrC) =>{
              if(itemC.treeCode == item1.treeCode){     //循环左边省下的（市级），根据treeCode找到左边与该点击相等的（市级）
                itemC.checked1 = false;      //左边该市级置为显示、背景置白可选、置为可操作
                itemC.checked = false;
                itemC.dealWith = true;
              }
            });
          }
        });
        //处理右边数据
        this.vue_areaRightData.forEach((itemA,indexA,arrA) =>{
          if(itemA.treeCode == item1.nodePropMap.areaParentCode){   //循环右边省，根据treeCode找到右边与该点击treeCode相等的（省级）
            itemA.children.forEach((itemC,indexC,arrC) =>{
              if(itemC.treeCode == item1.treeCode){    //循环右边省下的（市级），根据treeCode找到右边与该点击相等的（市级）
                itemC.checked1 = false;    //右边省下的对应（市级）置为（不显示）
              }
            });
            itemA.checked1 = !itemA.children.every(itemG =>{
              return !itemG.checked1;     //判断右边省级下的（市级）是否是（最后一个市级），若是，右边该省级不显示，若不是，右边该省级仍显示
            })
          }
        });

      },

      //右边点击（省级）（删除）按钮
      deleteProvincial_btn(item,index){
        this.vue_dealProvincialRight = item;
        //处理左边数据
        this.vue_areaLeftData.forEach((itemB,indexB,arrB) =>{
          if(itemB.treeCode == this.vue_dealProvincialRight.treeCode){           // 1、先在左边找到该点击省
            if(!itemB.dealWith){        //  2、先判断该省（全被选）
              itemB.checked1 = false;
              itemB.dealWith = true;
              this.vue_dealProvincialRight.children.forEach((itemD,indexD,arrD) =>{    //  3、市级在该点击省下（全部选中）
                itemB.children.forEach((itemE,indexE,arrE) =>{
                  if(itemD.treeCode == itemE.treeCode){
                    if(itemD.checked1){
                      itemE.checked = false;
                      itemE.checked1 = false;
                      itemE.dealWith = true;
                    }
                  }
                })
              })
            }else{          //省级 dealWith 为 true （1、省级及市级全部被选  2、省级下的（部分市被选））
              itemB.checked = false;
              itemB.checked1 = false;
              itemB.dealWith = true;
              if(this.vue_dealProvincialRight.checked1){
                this.vue_dealProvincialRight.children.forEach((itemD,indexD,arrD) =>{    //  3、市级在该点击省下（部分选中）
                  itemB.children.forEach((itemE,indexE,arrE) =>{
                    if(itemD.treeCode == itemE.treeCode){
                      if(itemD.checked1){
                        itemE.checked = false;
                        itemE.checked1 = false;
                        itemE.dealWith = true;
                      }
                    }
                  })
                })
              }

            }
          }
        });
        //处理右边数据
        this.vue_areaRightData.forEach((itemA,indexA,arrA) =>{  // 1、先在右边找到该点击省
          if(itemA.treeCode == item.treeCode){
            itemA.checked1 = false;      // 2、把右边该（省级）置为（不显示）
            itemA.children.forEach((itemC,indexC,arrC) =>{
              if(itemC.checked1){
                itemC.checked1 = false;   // 3、把右边该省级下的（市级）置为（不显示）
              }
            })
          }
        });
      },

      //点击（确定）按钮
      treeSureData_btn(){
        this.$emit("listenToChildRightData",this.vue_areaRightData);  //向父组件传值（本次右边选中数据）
        this.vue_areaLeftData.forEach((item,index,arr) =>{     //处理左边数据
          if(item.checked1){
            item.dealWith = false;
            item.children.forEach((itemA,indexA,arrA) =>{
              itemA.dealWith = false;
            })
          }else{
            item.children.forEach((itemB,indexB,arrB) =>{
              if(itemB.checked1){
                itemB.dealWith = false;
              }
            })
          }
        });
        this.vue_areaListShow = false;
        this.vue_iconShow = false;
      },

      //（添加）按钮
      addLeftToRight(){
        //处理左边的数据
        this.vue_areaLeftData.forEach((itemA,indexA,arrA) =>{
          if(itemA.dealWith){   //省级为可处理状态时
            if(itemA.checked){   //该省背景灰色被选中状态时，循环该省下的市级
              itemA.children.forEach((itemB,indexB,arrB) =>{
                if(itemB.dealWith){    //市级为可处理状态时
                  if(itemB.checked){    //市级为（灰色背景）被选中时
                    itemB.checked1 = true;    //置该市级为不显示状态
                  }
                }
              })
            }
            itemA.checked1 = itemA.children.every(item=>{   //判断是否选择了所有市,如果选择了所有的市，则隐藏这个省。反之则显示
              return item.checked1;
            });
            itemA.checked=false;    //左右（省级）背景置白
          }
        });
        //处理右边的数据
        this.vue_areaLeftData.forEach((itemA,indexA,arrA) =>{
          this.vue_areaRightData.forEach((itemB,indexB,arrB) =>{
            if(itemA.treeCode == itemB.treeCode){    //左右（省级）根据treeCode判断是否相等
              if(itemA.dealWith){   //省级为可处理状态时
                itemA.children.forEach((itemC,indexC,arrC) =>{
                  itemB.children.forEach((itemD,indexD,arrD) =>{
                    if(itemC.treeCode == itemD.treeCode){   //左右（市级）根据treeCode判断是否相等
                      if(itemC.checked){    //左边（市级）被选中
                        if(itemC.dealWith){
                          itemB.checked1 = itemC.checked;   //右边（省级级显示）
                          itemD.checked1 = itemC.checked;   //右边（市级显示）
                        }
                      }
                      itemC.checked = false;      //左边市级背景色还原（方便后面对省级显示背景色的判断）
                    }
                  })
                })
              }
            }
          });
        })

      },

      //左边点击（省级）
      firstNode_btn(item,index){
        //dealWith为true时可处理（表示未点击添加按钮之前的状态）
        if(item.dealWith){
          if(item.checked){   //点击已被选中的省，将其背景checked置白
            item.checked = false;
            item.children.forEach((itemA,indexA,arrA) =>{    //其对应的（市级）背景checked置白
              if(itemA.dealWith){
                itemA.checked = false;
              }
            })
          }else{
            item.checked = true;  //点击未被选中数据时，将其背景checked置灰
            item.children.forEach((itemA,indexA,arrA) =>{    //其对应的（市级）背景checked置灰
              if(itemA.dealWith){
                itemA.checked = true;
              }
            })
          }
        }
      },

      //左边点击（市级）
      lastNode_btn(item,index){
        if(item.dealWith){
          if(item.checked){   //点击(已被选中)的数据时，将其背景checked置白
            item.checked = false;
            this.vue_areaLeftData[this.vue_index].checked = !this.vue_areaLeftData[this.vue_index].children.every(itemG=>{
              return !itemG.checked;   //判断该被点击市是否是（最后一条已被置灰的市）；若是，去掉（省级）灰色背景；若不是，（省级）灰色背景仍在
            });
          }else{    //点击（未被选中）的数据时
            this.vue_areaLeftData[this.vue_index].checked = true;   //省级背景置灰
            item.checked = true;    //该市级背景置灰
          }
        }
      },

      //左边点击（折叠）按钮
      reduceIcon_btn(item,index){
        this.vue_index = index;
        this.vue_iconShow = false;
        this.vue_areaListShow = false;
      },

      //左边点击（展开）按钮
      addIcon_btn(item,index){
        this.vue_index = index;
        this.vue_iconShow = true;
        this.vue_areaListShow = true;
      },

      //右边点击（折叠）按钮
      reduceLeftIcon_btn(item,index){
        this.vue_indexR = index;
        this.vue_iconRShow = false;
        this.vue_areaListRShow = false;
      },

      //右边点击（展开）按钮
      addLeftIcon_btn(item,index){
        this.vue_indexR = index;
        this.vue_iconRShow = true;
        this.vue_areaListRShow = true;
      },

    },
  }
</script>

<style scoped>

  .area-box{
    overflow: hidden;
  }

  .button{
    text-align: right;
    margin-top: 10px;
  }

  .delete_icon{
    float: right;
    margin-right: 20px;
    font-size: 15px;
    color: #2ca1b3;

  }

  .gray{
    background: #d6dee3;
  }

  .area-last-ul li{
    padding-left: 55px;
  }

  .firstTreeName{
    margin-left: 10px;
  }

  .addIcon em{
    vertical-align: bottom;
    font-size: 14px;
    cursor: pointer;
    float: left;
  }

  .addIcon{
    line-height: 38px;
  }

  .reduceIcon{
    line-height: 38px;
  }

  .reduceIcon em{
    vertical-align: bottom;
    font-size: 16px;
    cursor: pointer;
    float: left;
  }

  .area-l-ul>li p{
    padding-left: 20px;
  }

  .area-l-ul>li{
    border-bottom: 1px solid #d6dee3;
    line-height: 38px;
    font-size: 12px;
    cursor: pointer;
  }

  .area-l-ul{
    background: white;
  }

  .area-r-box{
    border: 1px #dddddd solid;
    width: 332px;
    height: 500px;
    overflow: auto;
    float: left;
  }

  .area-r-box h3{
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background-color: #f5f6f7;
    border-bottom: 1px solid #d6dee3;
    line-height: 50px;
  }

  .area-m-box{
    float: left;
    width: 70px;
    height: 500px;
  }

  .area-m-box span{
    margin: 0 auto;
    width: 14px;
    height: 26px;
    border: 1px #dddddd solid;
    display: block;
    padding: 15px 7px;
    margin-top: 220px;
  }

  .area-m-box span:hover{
    cursor: pointer;
    background: #e0e3e4;
  }

  .area-l-box h3{
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background-color: #f5f6f7;
    border-bottom: 1px solid #d6dee3;
    line-height: 50px;
  }

  .area-l-box{
    border: 1px #dddddd solid;
    width: 332px;
    height: 500px;
    overflow: auto;
    float: left;
  }

  .area-title em{
    float: right;
    display: block;
    font-size: 16px;
    cursor: pointer;
  }

  .area-title em:hover{
    color:  #2ca1b3;
  }

  .area-title{
    height: 36px;
    line-height: 36px;
  }

  .section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, .2);
    z-index: 999999;
  }

  .area-body{
    padding: 0 20px;
    width: 740px;
    height: 600px;
    background: #f5f5f5;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -390px;
    position: fixed;
  }

</style>
